<template>
  <div class="newgroupContainer">
      <div class="top">
          <div @click="back()">
              <yd-icon name="back" custom slot="icon" size=".4rem" color='#ffffff'></yd-icon>
          </div>
          <p>新建分组</p>
      </div>
      <!-- 设置详情 -->
      <div class="mid">
          <div class="circleName" @touchend="inputItem.show=true">
             <p>群聊名称</p>
             <p>
                 {{circleName}}
              <yd-icon name="next" style="float:right" custom slot="icon" size=".4rem" color='#bbbbbb'></yd-icon>                 
             </p>
          </div>
         <div class="poi">
             <p>是否开启位置共享</p>
             <p>
                  <yd-switch color="#FFB36E"></yd-switch>
             </p>
         </div>
      </div>
      <!-- 创建群聊 -->
      <div class="btns">
          <button @touchend="create">创建分组</button>
      </div>
      <!-- 弹出输入框 -->
      <yl-pop-input :ylPop="inputItem" v-if="inputItem.show" @resVal="getMsg"></yl-pop-input>
  </div>
</template>
<script>
import ylPopInput from '@/components/popInput'
export default {
    components:{ylPopInput},
    data(){
        return{
            inputItem:{//弹出输入框
              cancel:this.cancel,
              show:false,
              title:"新建群聊",
              holder:"请输入群聊名称,不能超过8个字"
          },
          circleName:''
        }
    },
    computed:{
        staus(){
            return this.$store.state.addorfo
        }
    },
    methods:{
    cancel(){//取消按钮
         this.inputItem.show=false
      },
      back(){
          this.$store.commit('invitaObj',null)
          history.go(-1)
        //   this.$router.back()s
      },
    getMsg(data){
           this.inputItem.show=false
           if(data.length>8){
               this.circleName=data.slice(0,8)
           }else{
               this.circleName=data;
           }  
      },
    friendGroup(){//新建好友分组
            let data={
                name:this.circleName,
                userId:localStorage.userid
            }
            if(this.circleName===""){//群聊名称为空时触发提示 
                this.$dialog.toast({
                    mes: '请输入您要创建的群聊名称',
                    timeout: 1500,
                    icon: 'error'
                });
            }else{
                 this.ylAjax.newfriendgroup(data)
                       .then(res=>{
                           console.log(res)
                           if(res.state==0){//创建成功触发状态
                                this.$dialog.confirm({
                                    title: '提示',
                                    mes: '创建成功，是否马上邀请好友',
                                    opts: () => {
                                        //创建对象 保存相应值到vuex
                                        let a={
                                            groupId:res.data.id,
                                            type:"all",
                                            methods:'friend'
                                        }
                                        this.$store.commit('invitaObj',a)
                                        this.$router.push({name:'invitaList'})
                                    }
                                });
                           }else{
                                this.$dialog.toast({
                                    mes: '创建失败，请仔细检查，或稍后再试',
                                    timeout: 1500,
                                    icon: 'error'
                                });
                           }
                       })
                       .catch(err=>{
                           throw error
                       })
            }
    },
    focusGroup(){//关注分组
            let data={
                name:this.circleName,
                userId:localStorage.userid
            }
            if(this.circleName===""){//群聊名称为空时触发提示 
                this.$dialog.toast({
                    mes: '请输入您要创建的群聊名称',
                    timeout: 1500,
                    icon: 'error'
                });
            }else{         
            this.ylAjax.newFocusGroup(data)
                       .then(res=>{
                           console.log(res)
                           if(res.state==0){//创建成功触发状态
                                this.$dialog.confirm({
                                    title: '提示',
                                    mes: '创建成功，是否马上进行管理',
                                    opts: () => {
                                        //创建对象 保存相应值到vuex
                                        let a={
                                            groupId:res.data.id,
                                            type:"all",
                                            methods:'focus'
                                        }
                                        this.$store.commit('invitaObj',a)
                                        this.$router.push({name:'invitaList'})
                                    }
                                });
                           }else{
                                this.$dialog.toast({
                                    mes: '创建失败，请仔细检查，或稍后再试',
                                    timeout: 1500,
                                    icon: 'error'
                                });
                           }
                       })
                       .catch(err=>{
                           throw error
                       })
          }           
    },
    create(){//创建分组
        if(this.staus.type=="friend"){
            this.friendGroup()
        }else if(this.staus.type=="focus"){
            this.focusGroup()
        }
           
        },
    }
}
</script>
<style lang="less" scoped>
    @import "~less/base";
    .newgroupContainer{
        .top{//顶部导航
            height: 1rem;
            background-color: @background-a;
            line-height: 1rem;
            display: flex;
            div{
                flex: 0 0 20%;
                text-align: center;
            }
            p{
                flex: 0 0 60%;
                text-align: center;
                color: @color-t;
                font-size: 14px;
                letter-spacing: .03rem;
            }
        }
        .mid{//创建相关
            margin-top: .3rem;
            padding: 0 .2rem;
           .poi,.circleName{//权限设置相关
               display: flex;
               height: 1rem;
               line-height: 1rem;
               border-bottom:  1px solid @color-border4;
               >:nth-child(1){
                   flex: 0 0 60%;   
               }
               >:nth-child(2){
                   flex: 0 0 40%;
                   padding-top: .2rem;
                   input{
                       float: right
                   }
               }
           }
        }
        .btns{//创建
                margin-top: 1rem;
                text-align: center;
                position: absolute;
                top: 5rem;
                width: 100%;
                button{
                    width: 80%;
                    border: 1px solid  @color-border3;
                    background-color: @color-btn1;
                    height: 1rem;
                    line-height: 1rem;
                    color: @color-btnFont;
                    font-size: 14px;
                    border-radius: 5px;
                }
                button:active{
                    background-color:#FFB36E;
                }
        } 
    }
</style>
